<template>
  <div class="addrespage">
    <!-- 顶部 -->
    <div>
      <van-nav-bar title="填写订单" left-text="" left-arrow @click-left="this.$router.go(-1)" />
    </div>
    <!-- 地址栏 -->
    <div class="addreschoose" @click="goAddress">
      <p>{{ addressinfo?.name }}</p>
      <div>
        <p>{{ addressinfo?.tel }}</p>
        <p>
          {{
            addressinfo?.city + addressinfo?.county + addressinfo?.addressDetail
          }}
        </p>
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 选择优惠券 -->
    <div class="coupon">
      <!-- 优惠券单元格 -->
      <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="couponChoose" />
    </div>
    <!-- 留言 -->
    <div class="message">
      <van-cell-group inset>
        <van-field v-model="value" rows="1" autosize type="textarea" placeholder="如需要，请输入留言" />
      </van-cell-group>
    </div>
    <!-- 合计 -->
    <div class="amount">
      <van-cell-group inset>
        <van-field label="商品合计" :model-value="`￥${total}元`" input-align="right" readonly label-class="sss" />
        <van-field label="运费" :model-value="`￥${freight}元`" input-align="right" readonly />
        <van-field label="优惠券" :model-value="`-￥${discounts}元`" input-align="right" readonly />
      </van-cell-group>
    </div>
    <!-- 商品卡片 -->
    <CommodityCard :commodityInfo="infoArr"></CommodityCard>
  </div>
  <!-- 付款栏 -->
  <div>
    <van-submit-bar label="实付" text-align="left" :price="fullName" button-text="去付款" @click="orderto" />
  </div>
</template>
<script>
import CommodityCard from "@/components/CommodityCard";
import { service } from "../api/config.js";
import { fetchData } from "../api/request.js";
import { showConfirmDialog } from "vant";
export default {
  name: "OrderConfirm",
  components: { CommodityCard },
  data() {
    return {
      coupons: [],
      chosenCoupon: -1,
      value: "",
      freight: 0, //运费
      discounts: 0, //优惠券
      total: 0, //商品合计
      specification: "",
      infoArr: JSON.parse(this.$store.state.tocar),
      addressinfo: null,
    };
  },
  methods: {
    goAddress() {
      this.$store.commit("setValue", {
        key: "states",
        value: 1,
      });
      this.$router.push("/address");
    },
    couponChoose() {
      this.$store.commit("setValue", {
        key: "total",
        value: this.total,
      });
      this.$store.commit("setValue", {
        key: "states",
        value: 1,
      });
      this.$router.push("/coupon")
    },
    orderto() {
      service.post("/wx/order/submit", {
        cartId: sessionStorage.getItem("mycartid"),
        addressId: this.addressinfo.id,
        couponId: this.$store.state.coupon["cid"] == undefined || "" ? 0 : this.$store.state.coupon["cid"],
        userCouponId: this.$store.state.coupon["id"] == undefined || "" ? 0 : this.$store.state.coupon["id"],
        message: this.value,
        grouponRulesId: 0,
        grouponLinkId: 0,
      }).then(res => {
        console.log(res);
        if (res.data.errmsg == '成功') {
          sessionStorage.setItem("oid", res.data.data.orderId);
          showConfirmDialog({
            message: "是否立即付款",
          }).then(() => {
            this.$router.push({
              path: "paymentresult",
              query: { data: "success" },
            });
          }).catch(() => {
            this.$router.push({ path: "paymentresult", query: { data: "fail" } });
          });
        }
      })
    },
  },
  mounted() {
    service.get("/wx/address/list").then(res => {
      if (this.$store.state.address == null) {
        this.list = res.data.data.list;
        const ress = this.list.filter((item) => {
          return item.isDefault === true;
        });
        this.addressinfo = ress[0];
      } else {
        let addAddress = JSON.parse(this.$store.state.address);
        this.addressinfo = addAddress[0];
      }
    });
    this.infoArr.forEach(item => {
      this.total += item.num * Number(item.price);
    });
    this.discounts = this.$store.state.coupon["discount"] == undefined ? 0 : this.$store.state.coupon["discount"]
    fetchData(0, 1, this.total).then(res => {
      this.coupons = res;
      this.coupons[0].value = this.$store.state.coupon["discount"] == undefined ? 0 : this.$store.state.coupon["discount"] * 100;
      this.chosenCoupon = this.$store.state.coupon["discount"] == undefined ? -1 : 0;
    });
  },
  computed: {
    fullName() {
      return (this.total + this.freight - this.discounts) * 100;
    },
  },
}
</script>
<style scoped>
.commodity .specificationInfo p {
  font-size: 15rem;
}

.commodity .specificationInfo div {
  margin-top: 2px;
}

.commodity .specificationInfo p:nth-child(3) {
  margin-top: 18rem;
}

.addrespage {
  background-color: #f1f2f2;
  height: 100vh;
}

.addreschoose {
  position: relative;
  height: 80rem;
  background: #fff;
  margin: 5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rem;
}

.addreschoose div {
  position: absolute;
  left: 20%;
}

.coupon {
  margin: 10rem 0;
}

.van-cell.van-cell--clickable.van-coupon-cell {
  color: #888989;
}

.message {
  background-color: #ffffff;
  margin: 10rem 0;
}

.van-cell.van-field {
  padding: 10rem 0;
}

.amount {
  background-color: #ffffff;
}

.van-card {
  background-color: #ffffff;
  margin: 10rem 0;
}

.van-card__content p:nth-child(1)>span {
  float: right;
}

.money div {
  float: left;
  height: 15%;
}

.specificationInfo img {
  width: 100px;
}

.van-submit-bar {
  position: fixed;
  left: 0;
  z-index: var(--van-submit-bar-z-index);
  width: 100%;
  background: var(--van-submit-bar-background);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
</style>
